
import { observe } from './index'
import { arrayMethods, observerArray, dependArray } from './array'
import Dep from './dep'
/**
 * 定义响应式 数据变化
 */
export function defineReactive(data, key, value){
  // 如果value是对象，需用递归
  let childOb = observe(value)

  let dep = new Dep()
  // vue不支持ie8 的原因，defineProperty以下不能用
  Object.defineProperty(data, key, {
    get(){
      if (Dep.target) {
        // dep.addSub(Dep.target);
        dep.depend();
        if (childOb) { // 数组的依赖收集
          childOb.dep.depend();
          dependArray(value); // 收集数组中，子数组的依赖
        }
      }
      return value;
    },

    set(newValue){
      if (value === newValue) return
      observe(newValue)
      value = newValue;
      // 通知更新
      dep.notify();
      
    }
  });
}

class Observer {
  constructor(data){
    // 将用户的数据使用defineProperty重新定义

    // 专门给数组用的
    this.dep = new Dep();
    // 每个对象，包括数组都有一个__ob__属性  当前的Observer实例
    Object.defineProperty(data, '__ob__', {
      get: () => this
    });
    if (Array.isArray(data)) {
      // 需要重写push等方法
      data.__proto__ = arrayMethods;
      observerArray(data); // 递归观测数组中的每一项
    }else{
      this.walk(data)
    }
  }

  walk(data){
    let keys = Object.keys(data);
    console.log(keys)
    for(let i = 0; i < keys.length; i++){
      let key = keys[i];
      let value = data[key];

      defineReactive(data, key, value);
    }
  }
}

export default Observer;